<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 500px;
        background-color: aqua;
        padding: 10px;
      }
      #boxcom {
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 25px;
        color: white;
      }
      .box2 {
        width: 400px;
        height: 100px;
        background-color: white;
        padding: 5px;
        margin-bottom: 20px;
        border-radius: 10px;
        margin-left: 50px;
      }
      .box2 > input {
        width: 150px;
        border-radius: 10px;
        outline: none;
        border: 1px solid skyblue;
        margin-bottom: 10px;
      }
      .box2 > button {
        width: 60px;
        outline: none;
        border: 0;
        border-radius: 10px;
        height: 20px;
        background-color: cyan;
      }
      .table {
        width: 400px;

        padding: 5px;
        margin-bottom: 20px;
        border-radius: 10px;
        margin-left: 50px;
      }
      .thead,
      .tbody {
        display: flex;
        justify-content: space-between;
        text-align: center;
        border: 1px solid skyblue;
        margin-bottom: 3px;
      }
    </style>
  </head>
  <body>
    <div id="box" :user="user">
      <!-- 组件学生系统 -->
      <box-com ></box-com>
      <!-- 组件添加数据 -->
      <box-content-com  
      :myuser="user"
      @shuju="Vuejieshou"
      >
      </box-content-com>
      <!-- 数据展示 -->
      <box-foot-com :mystr="user" @key="key"></box-foot-com>
    </div>



    
    <!-- 学生系统组件 -->

    <template id="BoxCom">
      <div id="boxcom">{{message}}</div>
    </template>
    <!-- 内容添加组件 -->
    <template id="BoxContentCom">
      <div class="box2">
        姓名<input type="text" v-model="Studentname"/> 
        年龄<input type="text" v-model="Studentage"/> 
        性别<input type="text" v-model="Studentsex"/>
        <button @click="add">添加</button>
        <button @click="cort">排序</button>
      </div>
    </template>
    <!-- 内容展示组件 -->
    <template id="BoxFootCom">
      <div class="table">
        <div class="thead">
          <div class="th">姓名</div>
          <div class="th">年龄</div>
          <div class="th">性别</div>
          <div class="th">操作</div>
        </div>
        <div v-for="(item,key) in mystr" class="tbody">
          <div class="td">{{item.name}}</div>
          <div class="td">{{item.age}}</div>
          <div class="td">{{item.gender}}</div>
          <div class="td" @click="del(key)">删除</div>
        </div>
      </div>
    </template>
  </body>
  <script src="../../vue.js"></script>
  <script>
    let BoxFootCom = {//组件一负责渲染内容
      props:["mystr"],
      template: "#BoxFootCom",
      data: function () {
        return {
          // message:"学生系统"
        };
      },
      methods:{
        del(key){
          this.$emit("key",key);
        }
      }
    };
    let BoxCom = {//头部
      template: "#BoxCom",
      data: function () {
        return {
          message: "学生系统",
        };
      },
    };

    let BoxContentCom = {//组件二负责接受输入的内容添加内容到对象中
      props:["myuser"],
      methods:{
        // add()把添加的数据加入到数组里面去
        add(){
          // console.log(this.myuser);
            this.num++
            this.myuser.push({name:this.Studentname,age:this.Studentage,gender:this.Studentsex,num:this.num})
            this.$emit("shuju",this.myuser) 
        },
        cort(){
          this.myuser.sort((a,b)=>a.age-b.age)
        }
      },
      template: "#BoxContentCom",
      data: function () {
        return {
          Studentname: "",
          Studentage: "",
          Studentsex: "",
          num: 1,
        };
      },
    };

    //实例化本身
    new Vue({
      el: "#box",
      components: {
        BoxCom,
        BoxContentCom,
        BoxFootCom,
      },
      data: {
        user: [{ name: "张三", age: 20, gender: "男", num: 1 }],
      },
      methods:{
        Vuejieshou(arg){//接受已经添加的数据 然后让本身的数据进行更新
          this.user=arg;
        },
        key(arg){
          this.user.splice(arg,1);
        },
      }
    });
  </script>
</html>
